import { GetUserInfo, MoneyPoints } from '@/api/user';
import Empty from '@/components/Empty';
import classNames from 'classnames';
import useExchangeBeans from '@/components/useExchangeBeans';
import { Button, Tab, Tabs, Tag } from '@antmjs/vantui';
import { Image, Text, View } from '@tarojs/components';
import { useMemo, useState } from 'react';
import { useRequest } from 'taro-hooks';
import { RoleType } from 'types/user';
import useExchange from './components/useExchange';
import './index.less';

export default function Page() {
  const { renderNode: renderExchangeNode, open: openExchange } = useExchange({
    onSuccess: function () {
      setTimeout(() => {
        refreshUser();
      }, 1000);
    },
  });

  const { renderNode: renderExchangeBeansNode, open: openExchangeBeans } =
    useExchangeBeans({
      onSuccess: function () {
        setTimeout(() => {
          refreshUser();
        }, 1000);
      },
    });

  const [tabName, setTabName] = useState<'1' | '2'>('1');
  const { data: user, refresh: refreshUser } = useRequest(GetUserInfo, {
    cacheKey: 'get:user:info',
  });
  const { data: list } = useRequest(() => MoneyPoints({ type: tabName }), {
    refreshDeps: [tabName],
  });

  // ?是否有提现中的状态
  const txing = useMemo(() => list?.some((i) => i.tx_status === 0), [list]);

  return (
    <>
      <View className=' pt-[260px] pb-[200px]'>
        <View
          className='w-[640px] h-[218px] bg-cover mx-auto pt-[40px] pl-[50px] relative'
          style={{
            backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/head-bg-jifen.png)`,
          }}
        >
          {/* 冻结的积分 */}
          {Boolean(user?.dj_points) && (
            <View
              className=' absolute right-6 bottom-8 text-[20px] text-gary4 px-2 py-1 rounded-md flex items-center'
              style={{
                background:
                  '#fff linear-gradient(180deg, rgba(213,223,249,0.17) 0%, rgba(196,213,253,0.48) 56%, rgba(179,199,248,0.42) 100%)',
              }}
            >
              <View
                className='w-[24px] h-[24px] bg-cover mr-1'
                style={{
                  backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-m.svg)`,
                }}
              />
              {user?.dj_points}积分冻结中，不可提现
            </View>
          )}

          <View className=' flex items-center leading-none'>
            <Text className=' text-lg font-bold'>积分</Text>
            <Text className=' text-3xl text-black font-bold italic ml-5'>
              {user?.points || 0}
            </Text>
          </View>
        </View>

        <View className=' bg-white rounded-lg overflow-hidden mx-2 mt-2 pb-4'>
          <Tabs
            animated
            className=' text-base'
            lineWidth={160}
            onChange={(e) => {
              setTabName(e.detail?.name as '1' | '2');
            }}
          >
            <Tab title='积分收入明细' name='1' />
            <Tab title='积分支出明细' name='2' />
          </Tabs>

          {Boolean(!list?.length) && (
            <View className='pt-[100px] bg-white'>
              <Empty
                icon={
                  <Image
                    src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/empty-1.png'
                    className=' w-[381px] h-[311px] block -mb-[50px]'
                  />
                }
                title={
                  tabName === '1' ? '你还没有积分' : '你还没有积分支出记录'
                }
                desc='您可通过提供咨询服务、邀请好友注册等行为获取积分。获取的积分可以联系平台客服提现'
              />
            </View>
          )}

          <View className='p-4 bg-white'>
            {list?.map((item) => (
              <View
                className='border-b border-solid border-gary2 py-4 last:border-none'
                key={item.id}
              >
                <View className='flex text-black font-bold text-sm'>
                  <Text>{item.msg}</Text>

                  {item.tx_status === 0 && (
                    <Tag className=' text-[20px] ml-2'>处理中</Tag>
                  )}

                  {item.tx_status === 1 && (
                    <Tag className=' text-[20px] ml-2 text-success'>已到账</Tag>
                  )}

                  {item.tx_status === 2 && (
                    <Tag className=' text-[20px] ml-2'>提现失败已返回</Tag>
                  )}

                  <Text
                    className={classNames('ml-auto', {
                      'text-warn': tabName === '1',
                    })}
                  >
                    {tabName === '1' ? '+' : '-'} {item.money}
                  </Text>
                </View>
                <View className='flex text-xs text-gary4 mt-2'>
                  <Text>{item.biz_name}</Text>
                  <Text className=' block ml-auto'>{item.create_time}</Text>
                </View>
              </View>
            ))}
          </View>
        </View>

        {(user?.role === RoleType.专家 || user?.role === RoleType.合伙人) && (
          <View
            className=' flex fixed  space-x-3 left-0 right-0 bottom-0 px-4 py-2 bg-white fixed-container-shadow'
            style={{
              paddingBottom: 'calc(env(safe-area-inset-bottom))',
            }}
          >
            <Button
              block
              type='primary'
              onClick={() => {
                openExchange();
              }}
            >
              积分兑换现金
            </Button>
          </View>
        )}

        {user?.role == RoleType.用户 && (
          <View
            className=' flex fixed  space-x-3 left-0 right-0 bottom-0 px-4 pt-2 bg-white fixed-container-shadow'
            style={{
              paddingBottom: 'calc(env(safe-area-inset-bottom))',
            }}
          >
            {user?.point_tx && user?.vip && (
              <Button
                plain
                block
                hairline
                type='primary'
                className=' flex-1'
                onClick={() => {
                  openExchange();
                }}
              >
                积分兑换现金
              </Button>
            )}

            <Button
              plain
              block
              hairline
              type='primary'
              className=' flex-1'
              onClick={() => openExchangeBeans()}
            >
              积分兑换帮豆
            </Button>
          </View>
        )}
      </View>

      {renderExchangeNode()}
      {renderExchangeBeansNode()}
    </>
  );
}
